<template>
    <div class="content">
        <van-collapse v-model="activeName" accordion>
            <van-collapse-item :title="item.title" :name="item.name" v-for="item in demoList" :key="item.key">
                {{item.describe}}
                <router-link :to="item.link">
                    <van-button type="default" size="mini">Demo</van-button>
                </router-link>
            </van-collapse-item>
        </van-collapse>
    </div>
</template>

<script>
    import {Collapse, CollapseItem, Button} from 'vant';

    export default {
        components: {
            [Collapse.name]: Collapse,
            [CollapseItem.name]: CollapseItem,
            [Button.name]: Button
        },
        data() {
            return {
                activeName: '1',
                demoList: [
                    {
                        title: 'APP主页',
                        name: '1',
                        describe: '下拉刷新、上拉加载、长列表、条件筛选',
                        link: 'meeting'
                    },
                    {
                        title: '图片裁剪',
                        name: '2',
                        describe: '基于vue-cropper的头像、图片裁剪',
                        link: 'clipImg'
                    },
                    {
                        title: '类QQ评价',
                        name: '3',
                        describe: '类似于QQ空间的评价功能',
                        link: 'evaluate'
                    },
                    {
                        title: 'H5打开APP',
                        name: '4',
                        describe: 'H5唤起App功能',
                        link: 'loadApp'
                    },
                    {
                        title: '刷新、加载、滚动',
                        name: '5',
                        describe: '原生JS实现的基于vue的下拉刷新、上拉加载、无限加载、滚动事件',
                        link: 'selectType'
                    },
                    {
                        title: 'webp图片兼容性处理和懒加载',
                        name: '6',
                        describe: 'webp格式的图片体积较png、jepg、jpg有较大的体积优势。但是目前只有安卓全面支持，所以需要做一定兼容处理。',
                        link: 'webp'
                    }
                ]
            };
        }
    }
</script>

<style lang="scss">
    .confirm-box{
        width: 92%;
    }
</style>
